<template>
  <div class="page-content2">
  <splitter>
    <template #left>
      <el-tree
          :data="modules"
          :props="{children: 'children',label: 'name'}"
          :lazy="true"
          :node-key="'code'"
          :load="handleApisLoad"
          :current-node-key="currentId"
          @node-click="handleNodeClick">
        <template #default="{ node, data }">
         <span class="custom-tree-node">
           <svg-icon color="var(--el-text-color-regular)" :icon-class="data.icon"></svg-icon>
           <span>&nbsp;</span>
           <span>{{ node.label }}</span>
          </span>
        </template>
      </el-tree>
    </template>
    <template #right>
      <div >
        <component :is="comp"></component>
      </div>
    </template>
  </splitter>
  </div>
</template>
<script>
import svgIcon from "../../component/svgIcon.vue";
import apisList from "./list.vue";
import apisEdit from "./edit.vue";
import splitter from "../../component/splitter.vue";
import {list as listApis} from '../../http/apis.js'
import {getModules} from '../../http/module.js'
const {ElMessage,ElMessageBox} = ElementPlus;
export default {
  components: {apisList,apisEdit,splitter,svgIcon},
  setup(props,context) {
    const modules = ref([])
    const currentId = ref(null)
    const comp = ref(null)

    const handleNodeClick=(data)=>{
      console.log(data)
      if(data.type=='M'){
        comp.value = apisList
      }else{
        comp.value = apisEdit
      }
    }

    const loadModules = ()=>{
      getModules().then(res=>{
        modules.value = res.data.data.map(item=>{
          item.id = item.code;
          return item;
        })
        console.log(111)
        currentId.value = modules.value[0].code;

        nextTick(()=>{
          handleNodeClick(modules.value[0]);
        })

      })
    }

    // const loadApiList = (node)=>{
    //   console.log(node)
    //   listApis({module:node.code}).then(res=>{
    //     node.data.children = res.data
    //   });
    // }



    const handleApisLoad = (node, resolve, reject) => {
      console.log(node)
      if(node.level === 0){
        getModules().then(res=>{
          // modules.value = res.data.data.map(item=>{
          //   item.id = item.code;
          //   return item;
          // })
          const data = res.data.data?res.data.data:[];
          currentId.value = data[0].code;

          console.log(currentId.value)
          resolve(data)

          // currentModule.value = modules.value[0];
          // handleNodeClick(currentModule.value);
        })
      } else if (node.level === 1) {
        listApis({module:node.data.code}).then(res=>{
          console.log(res.data.data)
          return resolve(res.data.data?res.data.data:[])
        });
      }else{
        reject([])
      }

    }

    onMounted(()=>{
      //loadModules();
    })


    return {
      modules,
      currentId,
      handleNodeClick,
      handleApisLoad,
      comp
    };
  }
}
</script>
<style scoped>
.page-content2 {
  flex-grow: 1;
}
</style>